<script setup lang="ts">
import {User, Radiation, SunOne} from "@icon-park/vue-next"
import {onMounted, ref} from "vue";
import {getOverallStatisticsApi} from "@/api/chartApis.ts";

const totalNum = ref(0)
const goodNum = ref(0)
const pollutionNum = ref(0)

// 获取数据
const initData = async () => {
  let res = await getOverallStatisticsApi()
  if (res?.data.code == 200){
    totalNum.value = res.data.data.totalNum
    goodNum.value = res.data.data.goodNum
    pollutionNum.value = res.data.data.pollutionNum
  }
}

onMounted(async () => {
  await initData()
})
</script>

<template>
<div class="w-full h-1/3 flex flex-col items-start justify-center">
  <div class="text-center font-bold text-white text-sm w-full h-1/3">空气质量实时统计</div>
  <div class="w-full h-2/3 flex justify-between items-center">
  <div class="w-1/3 h-full flex justify-items-start items-start">
    <user theme="outline" size="48" fill="#4a90e2"/>
    <div class="w-2/3 flex flex-col justify-items-start items-start pl-2.5">
      <div class="text-center font-bold text-white text-3xl">
        {{totalNum}}
      </div>
      <div class=" font-bold text-white" style="font-size: 12px">空气质量检测总数量</div>
    </div>
  </div>
  <div class="w-1/3 h-full flex justify-items-start items-start ">
    <sun-one theme="outline" size="48" fill="#4a90e2"/>
    <div class="w-2/3 flex flex-col justify-items-start pl-2.5 items-start">
      <div class="text-center font-bold text-white text-3xl">
        {{goodNum}}
      </div>
      <div class=" font-bold text-white" style="font-size: 12px">空气质量良好数量</div>
    </div>
  </div>
  <div class="w-1/3 h-full flex justify-items-start items-start">
    <radiation theme="outline" size="48" fill="#4a90e2"/>
    <div class="w-2/3 flex flex-col justify-items-start items-start pl-2.5">
      <div class="text-center font-bold text-white text-3xl">
        {{pollutionNum}}
      </div>
      <div class=" font-bold text-white" style="font-size: 12px">空气质量污染数量</div>
    </div>
  </div>
  </div>
</div>
</template>

<style scoped>

</style>
